<template>
  <div>
    <el-row :gutter="20" justify="space-between">
      <el-col><el-alert title="本页内容属于静态内容，非真实接口数据。" type="warning" :closable="false" /></el-col>
    </el-row>
    <el-row :gutter="20" justify="space-between">
      <el-col>
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <div style="display: flex">
                <div style="width: 100px">
                  <img style="width: 80px; height: 80px; border-radius: 30px" src="@/assets/images/image.png" />
                </div>
                <div style="flex: 1">
                  <h3 style="padding: 0; margin: 0; font-size: 18px">兴道数据采集平台</h3>
                  <p style="color: rgb(153 153 153)">
                    兴道数据采集平台是一种专门用于在互联网环境中自动抓取海量数据的智能工具。它依据预设的规则与算法，模拟浏览器的行为，精准且高效地遍历各类网页链接，从 HTML
                    页面中深度提取诸如文本、图片、链接等丰富多样的信息资源。系统具备强大的多线程并发处理能力，能在短时间内广泛涉猎众多网站，可灵活应对不同网站的结构与反爬机制，通过数据清洗与转换，将采集到的原始数据整理成可供后续分析、挖掘与应用的结构化形式，为市场调研、舆情监测、学术研究等多方面提供有力的数据支撑。
                  </p>
                </div>
              </div>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
    </el-row>
    <el-row :gutter="20" justify="space-between">
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="color: #e5e7eb; margin: 8px; background-image: linear-gradient(to right bottom, rgb(236, 71, 134), rgb(185, 85, 164))">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0; font-size: 16px">数据总量</h4>
              <div style="font-size: 30px; margin-top: 10px">
                <span style="float: right">{{ analysisData.docsTotalCount || 0 }}</span>
                <span>
                  <el-icon><Box /></el-icon>
                </span>
              </div>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="color: #e5e7eb; margin: 8px; background-image: linear-gradient(to right bottom, rgb(134, 94, 192), rgb(81, 68, 180))">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0; font-size: 16px">访问总量</h4>
              <div style="font-size: 30px; margin-top: 10px">
                <span style="float: right">{{ analysisData.visitorCount || 0 }}</span>
                <span>
                  <el-icon><View /></el-icon>
                </span>
              </div>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="color: #e5e7eb; margin: 8px; background-image: linear-gradient(to right bottom, rgb(86, 205, 243), rgb(113, 157, 227))">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0; font-size: 16px">存储占用</h4>
              <div style="font-size: 30px; margin-top: 10px">
                <span style="float: right">{{ 102 }}GB</span>
                <span>
                  <el-icon><Files /></el-icon>
                </span>
              </div>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="color: #e5e7eb; margin: 8px; background-image: linear-gradient(to right bottom, rgb(252, 188, 37), rgb(246, 128, 87))">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0; font-size: 16px">存储数据库个数</h4>
              <div style="font-size: 30px; margin-top: 10px">
                <span style="float: right">{{ analysisData.indexsNum }}</span>
                <span>
                  <el-icon><Grid /></el-icon>
                </span>
              </div>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
    </el-row>
    <el-row :gutter="20" justify="space-between">
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0">数据量</h4>
              <p>今日：803,049</p>
              <p>昨日：1,473,791</p>
              <p>
                同比：-20%<el-icon color="green"><Bottom /></el-icon>
              </p>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0">阅读量</h4>
              <p>今日：373,256</p>
              <p>昨日：665,710</p>
              <p>
                同比：-20%<el-icon color="green"><Bottom /></el-icon>
              </p>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0">下载量</h4>
              <p>今日：358,500</p>
              <p>昨日：665,710</p>
              <p>
                同比：-20%<el-icon color="green"><Bottom /></el-icon>
              </p>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <ElSkeleton :loading="loading" animated :rows="2">
            <template #default>
              <h4 style="padding: 0; margin: 0">转发量</h4>
              <p>今日：72.48%</p>
              <p>昨日：71.46%</p>
              <p>
                同比：7%<el-icon color="red"><Top /></el-icon>
              </p>
            </template>
          </ElSkeleton>
        </ElCard>
      </el-col>
    </el-row>
    <ElRow :gutter="20" justify="space-between">
      <ElCol :span="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <el-radio-group v-model="visitDate" @change="changeVisitDate">
            <el-radio-button label="日" :value="1" />
            <el-radio-button label="周" :value="2" />
            <el-radio-button label="月" :value="3" />
            <el-radio-button label="年" :value="4" />
          </el-radio-group>
          <el-radio-group v-model="optionType" @change="changeOptionType" style="margin: 0 20px">
            <el-radio-button label="阅读" :value="1" />
            <el-radio-button label="下载" :value="2" />
            <el-radio-button label="收藏" :value="3" />
            <el-radio-button label="分享" :value="4" />
          </el-radio-group>
        </ElCard>
      </ElCol>
      <ElCol :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>热门文章</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated>
            <div ref="myChart11" id="myChart11" :style="{ height: '300px' }"></div>
          </ElSkeleton>
        </ElCard>
      </ElCol>
      <ElCol :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>热词</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated>
            <div ref="myChart12" id="myChart12" :style="{ height: '300px' }"></div>
          </ElSkeleton>
        </ElCard>
      </ElCol>
      <ElCol :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>分类分析</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated>
            <div ref="myChart13" id="myChart13" :style="{ height: '300px' }"></div>
          </ElSkeleton>
        </ElCard>
      </ElCol>
      <ElCol :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>文章使用量分析</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated>
            <div id="myChart2" :style="{ height: '369px' }"></div>
          </ElSkeleton>
        </ElCard>
      </ElCol>
      <ElCol :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>文章操作信息</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated :rows="4">
            <el-table :data="visitTableData" style="width: 100%" height="300">
              <el-table-column prop="date" label="时间" width="150" />
              <el-table-column prop="name" label="姓名" width="100" />
              <el-table-column prop="city" label="操作信息" show-overflow-tooltip />
              <!-- <el-table-column prop="state" label="状态" width="120" /> -->
            </el-table>
          </ElSkeleton>
          <template #footer><el-pagination layout="prev, pager, next" :total="50" /></template>
        </ElCard>
      </ElCol>

      <ElCol :xl="7" :lg="7" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>栏目分析</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated>
            <div ref="myChart" id="myChart" :style="{ height: '300px' }"></div>
          </ElSkeleton>
        </ElCard>
      </ElCol>
      <ElCol :xl="7" :lg="7" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>部门文章操作分析</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated>
            <div ref="myChart4" id="myChart4" :style="{ height: '300px' }"></div>
          </ElSkeleton>
        </ElCard>
      </ElCol>

      <ElCol :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
        <ElCard shadow="never" class="mb-20px" style="margin: 8px">
          <template #header>
            <div class="card-header">
              <span>登录信息</span>
            </div>
          </template>
          <ElSkeleton :loading="loading" animated :rows="4">
            <el-table :data="loginTableData" style="width: 100%" height="300">
              <el-table-column prop="date" label="Date" width="150" />
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="city" label="部门" />
              <el-table-column prop="state" label="状态" width="120" />
            </el-table>
          </ElSkeleton>
        </ElCard>
      </ElCol>
    </ElRow>
  </div>
</template>

<script lange="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import echartTheme from "@/assets/echarts/macarons.project.json";
import baseService from "@/service/baseService";
import "echarts-wordcloud";

const loading = ref(true);
const visitDate = ref(1);
const optionType = ref(1);

const visitTableData = [
  {
    date: "2016-05-03 09:00",
    name: "admin",
    state: "浏览正文",
    city: "浏览正文【以科技创新引领产业创新】",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-02 09:00",
    name: "张三",
    state: "检索",
    city: "检索【蛇年假期重合度非常高】",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-04 09:00",
    name: "范伟",
    state: "浏览正文",
    city: "浏览正文【哪一刻 硬控了你的2024】",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-01 09:00",
    name: "曾科",
    state: "浏览列表",
    city: "浏览列表【A股今日共83只个股涨停】",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-08 09:00",
    name: "李白",
    state: "浏览正文",
    city: "浏览正文【房地产止跌回稳初见成效】",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-06 09:00",
    name: "杜甫",
    state: "浏览正文",
    city: "浏览正文【又一省会城市发布容积率新规】",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-07 09:00",
    name: "唐高宗",
    state: "浏览正文",
    city: "浏览正文【增值税法通过】",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  }
];
const loginTableData = [
  {
    date: "2016-05-03 09:00",
    name: "admin",
    state: "成功",
    city: "算法部",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-02 09:00",
    name: "张三",
    state: "密码错误",
    city: "研发一部",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-04 09:00",
    name: "范伟",
    state: "锁定",
    city: "算法部",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-01 09:00",
    name: "曾科",
    state: "密码错误",
    city: "算法部",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-08 09:00",
    name: "李白",
    state: "锁定",
    city: "算法部",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-06 09:00",
    name: "杜甫",
    state: "California",
    city: "算法部",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-07 09:00",
    name: "唐高宗",
    state: "California",
    city: "算法部",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  }
];
const analysisData = ref({
  activeShardsPercent: 0,
  clusterStatus: "",
  activeReplicas: "",
  version: "",
  activePrimaryShards: "",
  docsTotalSize: 0,
  indexsNum: 0,
  docsTotalCount: 32131321,
  nodesNum: 0,
  clusterName: "",
  visitorCount: 12321321
});

const getAllApi = async () => {
  loading.value = false;
};
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;
echarts.registerTheme("mytheme", echartTheme.theme);
const initMyChart = () => {
  const dom = document.getElementById("myChart");
  const myChart = echarts.init(dom, "mytheme"); // 初始化echarts实例
  const option = {
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        type: "pie",
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 1048, name: "OA系统" },
          { value: 735, name: "系统登录" },
          { value: 580, name: "其他链接" }
        ]
      }
    ]
  };
  // 设置实例参数
  myChart.setOption(option);
};

const initMyChart11 = () => {
  const dom = document.getElementById("myChart11");
  const myChart = echarts.init(dom, "mytheme"); // 初始化echarts实例
  // const data = listIndexInfos.value.items.map((item) => ({ name: item.indexName, value: item.docsNum }));
  const option = {
    // color: ["#7F8AF2"],
    grid: {
      left: "3%",
      right: "3%",
      top: "7%",
      bottom: "0",
      containLabel: true
    },
    yAxis: [
      {
        type: "category",
        data: ["增值税法通过", "待开采比特币不足120万枚", "又一省会城市发布容积率新规", "房地产止跌回稳初见成效", "2024年北京多项基础设施升级", "北京三大交通枢纽开通倒计时，在这里", "北京将举办近30场跨年活动"],
        show: true,
        axisTick: {
          // 轴刻度线
          show: false
        },
        axisLine: {
          // 轴
          show: false
        },
        inverse: "true", // 排序,
        axisLabel: {
          show: true,
          inside: true,
          interval: 0, //横轴信息全部显
          splitNumber: 50,
          color: "#333333",
          verticalAlign: "bottom",
          fontSize: 15,
          align: "left",
          padding: [0, 0, 12, -5]
        }
      },
      {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          inside: false,
          color: "#021C38",
          fontSize: "14",
          formatter: function (v) {
            return v + "次";
          }
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        inverse: "true", // 排序
        data: [1120, 230, 220, 170, 160, 150, 20]
      }
    ],
    xAxis: {
      show: false,
      type: "value"
    },
    series: [
      {
        inverse: "true", // 排序
        data: [1120, 230, 220, 170, 160, 150, 20],
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          borderRadius: 40
        },
        barWidth: "15",
        itemStyle: {
          borderRadius: 4,
          color: (param) => {
            //实现柱状图条 下面四种颜色循环显示
            let colorList = ["#000080", "#f8d26b", "#74dcc4", "#1E90FF", "#FF7F50", "#483D8B", "#DDA0DD", "#800080"];
            return colorList[param.dataIndex % 9];
          }
        }
      }
    ]
  };
  // 设置实例参数
  myChart.setOption(option);
};

const initMyChart12 = () => {
  const dom = document.getElementById("myChart12");
  const myChart = echarts.init(dom, "mytheme"); // 初始化echarts实例
  // const data = listIndexInfos.value.items.map((item) => ({ name: item.indexName, value: item.docsNum }));
  var keywords = [
    { name: "美国", value: 2.64 },
    { name: "技术", value: 4.03 },
    { name: "安全", value: 24.95 },
    { name: "乌克兰", value: 4.04 },
    { name: "俄罗斯", value: 5.27 },
    { name: "武器", value: 5.8 },
    { name: "合作", value: 3.09 },
    { name: "联合", value: 24.71 },
    { name: "冲突", value: 6.33 },
    { name: "研究", value: 2.55 },
    { name: "无人机", value: 3.88 },
    { name: "领域", value: 8.04 },
    { name: "美元", value: 5.87 },
    { name: "网络", value: 6.97 },
    { name: "人工智能", value: 2.53 },
    { name: "AI", value: 2.49 },
    { name: "大模型", value: 3.91 },
    { name: "行动", value: 3.25 },
    { name: "国际", value: 9.93 },
    { name: "前沿", value: 3.65 },
    { name: "互联网服务", value: 1000 },
    { name: "交通运输", value: 850 },
    { name: "公司", value: 800 },
    { name: "军工", value: 600 },
    { name: "医药", value: 900 },
    { name: "商务服务", value: 600 },
    { name: "城乡规划", value: 800 },
    { name: "家政服务", value: 400 },
    { name: "安防", value: 850 },
    { name: "医疗服务", value: 200 },
    { name: "电子科技", value: 4000 },
    { name: "航空航天", value: 1500 },
    { name: "食品饮料", value: 1500 },
    { name: "能源", value: 800 },
    { name: "教育培训", value: 200 },
    { name: "金融", value: 100 },
    { name: "文化娱乐", value: 250 },
    { name: "电力", value: 1200 },
    { name: "石油化工", value: 300 },
    { name: "电子商务", value: 900 },
    { name: "建筑", value: 700 },
    { name: "旅游", value: 550 },
    { name: "环保", value: 750 },
    { name: "地产", value: 1100 },
    { name: "体育", value: 300 },
    { name: "通信", value: 950 },
    { name: "科研", value: 1200 },
    { name: "物流", value: 1300 },
    { name: "咨询", value: 600 },
    { name: "游戏", value: 850 },
    { name: "人力资源", value: 500 },
    { name: "水务", value: 300 },
    { name: "舞蹈艺术", value: 150 },
    { name: "汽车制造", value: 1100 },
    { name: "电影制作", value: 350 },
    { name: "游乐园", value: 250 },
    { name: "新能源", value: 900 },
    { name: "服装设计", value: 400 },
    { name: "采矿", value: 700 },
    { name: "信息安全", value: 800 },
    { name: "化妆品", value: 600 },
    { name: "音乐产业", value: 750 },
    { name: "物联网", value: 1200 },
    { name: "绿色建筑", value: 850 },
    { name: "社交媒体", value: 950 },
    { name: "人工智能", value: 1000 },
    { name: "水产养殖", value: 320 },
    { name: "医学研究", value: 1800 },
    { name: "动物保护", value: 130 },
    { name: "航海", value: 1000 }
  ];
  const option = {
    series: [
      {
        type: "wordCloud",
        //maskImage: maskImage,
        sizeRange: [15, 80],
        rotationRange: [0, 0],
        gridSize: 8,
        shape: "pentagon",
        width: "100%",
        height: "96%",
        data: keywords,
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "bold",
          // 颜色可以用一个函数来返回字符串
          color: function () {
            // 随机颜色
            return "rgb(" + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(",") + ")";
          }
        }
      }
    ]
  };
  // 设置实例参数
  myChart.setOption(option);
};
const initMyChart13 = () => {
  const dom = document.getElementById("myChart13");
  const myChart = echarts.init(dom, "mytheme"); // 初始化echarts实例
  // const data = listIndexInfos.value.items.map((item) => ({ name: item.indexName, value: item.docsNum }));
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "5%",
      right: "5%",
      top: "10%",
      bottom: "0",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["制度法规", "新闻快讯", "研究报告", "学术论文", "政策文献", "智库报告", "实时跟踪"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        itemStyle: {
          borderRadius: 4,
          color: (param) => {
            //实现柱状图条 下面四种颜色循环显示
            let colorList = ["#000080", "#f8d26b", "#74dcc4", "#483D8B", "#1E90FF", "#FF7F50", "#DDA0DD", "#800080"];
            return colorList[param.dataIndex % 9];
          }
        }
      }
    ]
  };
  // 设置实例参数
  myChart.setOption(option);
};
const initMyChart4 = () => {
  const dom = document.getElementById("myChart4");
  const myChart = echarts.init(dom, "mytheme"); // 初始化echarts实例
  // const data = listIndexInfos.value.items.map((item) => ({ name: item.indexName, value: item.docsNum }));
  const option = {
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        type: "pie",
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 1048, name: "数字化部门" },
          { value: 735, name: "研发一部" },
          { value: 580, name: "研发二部" },
          { value: 580, name: "算法部" },
          { value: 580, name: "售前部" },
          { value: 10, name: "销售部" },
          { value: 22, name: "行政部" },
          { value: 200, name: "数据分析部" }
        ]
      }
    ]
  };
  // 设置实例参数
  myChart.setOption(option);
};
const changeVisitDate = (val) => {
  let legendData = ["今日", "昨日"];
  let xAxisData = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"];
  let dayData = [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310];
  let yesterdayData = [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210];
  switch (val) {
    case 1: {
      legendData = ["今日", "昨日"];
      xAxisData = ["00:00", "01:15", "02:30", "03:45", "05:00", "06:15", "07:30", "08:45", "10:00", "11:15", "12:30", "13:45", "15:00", "16:15", "17:30", "18:45", "20:00", "21:15", "22:30", "23:45"];
      dayData = [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310];
      yesterdayData = [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210];
      break;
    }
    case 2:
      legendData = ["本周", "上周"];
      xAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      dayData = [220, 182, 191, 234, 290, 330, 310];
      yesterdayData = [120, 132, 101, 134, 90, 230, 210];
      break;
    case 3:
      legendData = ["本月", "上月"];
      xAxisData = ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日"];
      dayData = [220, 182, 191, 234, 290, 330, 310, 234, 290, 330, 310, 234, 290, 330, 310, 234, 290, 330, 310, 310, 234, 290, 330, 310, 234, 290, 330, 310, 290, 330];
      yesterdayData = [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 134, 90, 230, 210, 134, 90, 230, 210, 90, 230, 210, 134, 90, 230, 210, 210, 134, 90, 134];
      break;
    case 4:
      legendData = ["今年", "去年"];
      xAxisData = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
      dayData = [220, 182, 191, 234, 290, 330, 310, 234, 290, 330, 310, 234, 290, 330, 310, 234, 290, 330, 310];
      yesterdayData = [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 134, 90, 230, 210, 134, 90, 230, 210];
      break;
    default:
      break;
  }
  initMyChart2(legendData, xAxisData, dayData, yesterdayData);
};
const changeOptionType = (val) => {
  console.log(val);
};
let myChart2 = reactive();

const initMyChart2 = (legendData, xAxisData, dayData, yesterdayData) => {
  if (!myChart2) {
    const dom = document.getElementById("myChart2");
    myChart2 = echarts.init(dom, "mytheme"); // 初始化echarts实例
  }

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    legend: {
      data: legendData
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      boundaryGap: false
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} 次"
      },
      axisPointer: {
        snap: true
      }
    },
    series: [
      {
        name: legendData[0],
        type: "line",
        smooth: true,
        lineStyle: {
          width: 2, // 设置线宽
          color: "#6017b3"
        },
        data: dayData
      },
      {
        name: legendData[1],
        type: "line",
        smooth: true,
        lineStyle: {
          // width: 3, // 设置线宽
          color: "#2222614a"
        },
        data: yesterdayData
      }
    ]
  };
  // 设置实例参数
  myChart2.setOption(option);
};

//echarts图表自适应方法
const resizeChart = () => {
  const dom = document.getElementById("myChart");
  const myChart = echarts.init(dom, "mytheme"); // 初始化echarts实例
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
      myChart2.resize();
      // myChart4.resize();
    },
    false
  );
};
onMounted(() => {
  initMyChart();
  changeVisitDate();
  initMyChart4();
  initMyChart11();
  initMyChart12();
  initMyChart13();
  resizeChart();
});
getAllApi();
</script>

<style></style>
